<template>
  <div class="card pd2 col mt ml" style="min-width: 180px;">
    <div class="col_center">
      <el-button :loading="ctx.connBusy" @click="onClickConn" style="width: 150px;" type="primary">{{ ctx.btnText }}</el-button>
      <el-button :loading="ctx.clearBusy" @click="onClickReset" style="margin-left: 0px; margin-top: 10px; width: 150px;" type="warning">清除故障</el-button>
    </div>
    <RobotStateView />
    <PosView />
  </div>
</template>


<script setup lang="ts">

import RobotStateView from '../components/RobotStateView.vue';
import PosView from '../components/PosView.vue';
import { robot } from '../robot/robot';
import { reactive } from 'vue';
import { dialog } from '../utils/dialog';
import service from '../robot/service';

const TEXT_CONN = "连接机械臂";
const TEXT_DICONN = "断开机械臂";

const ctx = reactive({
  btnText: TEXT_CONN,
  connBusy: false,
  clearBusy: false,
});


async function update_conn() {
  if (await robot.isConnect()) {
    ctx.btnText = TEXT_DICONN;
  } else {
    ctx.btnText = TEXT_CONN;
  }
}

async function onClickReset() {
  try {
    ctx.clearBusy = true;
    await service.resetAllError();
  } catch (msg) {
    dialog.err(msg);
  } finally {
    ctx.clearBusy = false;
  }
}

async function onClickConn() {

  try {
    ctx.connBusy = true;
    if (!await robot.isConnect()) {
      await robot.connect();
    } else {
      await robot.disconnect();
    }
    await update_conn();
  } catch (msg) {
    dialog.err(msg);
  } finally {
    ctx.connBusy = false;
  }

}

update_conn();

</script>

